<template>
  <view class="tab_bar" :style="colorStyle">
    <template v-for="(item, index) in list" :key="index">
      <view
        class="tab-bar-item flex_fc"
        @click="goJumpPage(item)"
        v-if="item.show"
      >
        <image
          class="tab_img"
          :class="{ middle: !item.text }"
          :src="selected === item.id ? item.selectedIconPath : item.iconPath"
        ></image>
        <view class="tab_text">
          <text :class="{ active: selected === item.id }">{{ item.text }}</text>
        </view>
      </view>
    </template>
  </view>
</template>
<script setup>
import { toRefs, defineProps, onMounted, onBeforeMount } from "vue";
import { isWeixin, JumpPath } from "@/utils/index";
import { useTheme } from "@/composables/useTheme";
import { onShow } from "@dcloudio/uni-app";
import { getisMoneyRemind } from "@/api/home";
import Cache from "@/utils/cache";
import { USER_INFO, LOGIN_STATUS } from "@/config/cache";
let business_id = ref(Cache.get("business_id"));
let props = defineProps({
  is_gold_basis: {
    type: Boolean,
    default: false,
  },
  is_money_remind: {
    type: Boolean,
    default: false,
  },
  selected: {
    type: Number,
    default: 1,
  },
  isShowAllMenu: {
    type: Boolean,
    default: () => false,
  },
  shareData: {
    type: Object,
    default: () => ({
      business_id: 0,
      urltype: "",
    }),
  },
});
const { shareData, is_money_remind, is_gold_basis } = toRefs(props);
onShow(() => {
  hiddeRemindHandler();
});
async function hiddeRemindHandler() {
  let business_id = Cache.get("business_id");
  let userInfo = Cache.get(USER_INFO) && JSON.parse(Cache.get(USER_INFO));

  let { data } = await getisMoneyRemind({
    business_id: business_id || userInfo.id,
  });
  let is_money_remind = !!+data.is_money_remind;
  let is_gold_basis = !!+data.is_gold_basis;
  setRemindMenuHandler(is_money_remind);
  setBasisMenuHandler(is_gold_basis);
}
function goJumpPage(item) {
  uni.switchTab({
    url: item.pagePath,
    fail(err) {
      uni.redirectTo({
        url: item.pagePath,
      });
    },
  });
}

let showAll = ref(false);

let list = ref([]);
// 更新tabbar列表的方法
const updateTabBarList = (showAll) => {
  if (showAll) {
    list.value = [
      {
        pagePath: `/pages/tabbar/home`,
        text: "首页",
        iconPath: "/static/image/tabbar/1-1.png",
        selectedIconPath: "/static/image/tabbar/1-2.png",
        id: 1,
        show: true,
      },
      {
        pagePath: `/pages/tabbar/basis`,
        text: "基差",
        iconPath: "/static/image/tabbar/3-1.png",
        selectedIconPath: "/static/image/tabbar/3-2.png",
        id: 3,
        show: false,
      },
      {
        pagePath: `/pages/tabbar/remind`,
        text: "提醒",
        iconPath: "/static/image/tabbar/7-1.png",
        selectedIconPath: "/static/image/tabbar/7-2.png",
        id: 6,
        show: false,
      },
      {
        pagePath: `/pages/tabbar/information`,
        text: "资讯",
        iconPath: "/static/image/tabbar/2-1.png",
        selectedIconPath: "/static/image/tabbar/2-2.png",
        id: 2,
        show: true,
      },
      {
        pagePath: "/pages/tabbar/my",
        text: "我的",
        iconPath: "/static/image/tabbar/5-1.png",
        selectedIconPath: "/static/image/tabbar/5-2.png",
        id: 5,
        show: true,
      },
    ];
  } else {
    list.value = [
      {
        pagePath: `/pages/tabbar/home?business_id=${shareData.value.business_id}&urltype=${shareData.value.urltype}`,
        text: "行情",
        iconPath: "/static/image/tabbar/1-1.png",
        selectedIconPath: "/static/image/tabbar/1-2.png",
        id: 1,
        show: true,
      },
      {
        pagePath: `/pages/tabbar/basis?business_id=${shareData.value.business_id}&urltype=${shareData.value.urltype}`,
        text: "基差",
        iconPath: "/static/image/tabbar/3-1.png",
        selectedIconPath: "/static/image/tabbar/3-2.png",
        id: 3,
        show: false,
      },
      {
        pagePath: `/pages/tabbar/remind?business_id=${shareData.value.business_id}&urltype=${shareData.value.urltype}`,
        text: "提醒",
        iconPath: "/static/image/tabbar/7-1.png",
        selectedIconPath: "/static/image/tabbar/7-2.png",
        id: 6,
        show: false,
      },
      {
        pagePath: `/pages/tabbar/information?business_id=${shareData.value.business_id}&urltype=${shareData.value.urltype}`,
        text: "资讯",
        iconPath: "/static/image/tabbar/2-1.png",
        selectedIconPath: "/static/image/tabbar/2-2.png",
        id: 2,
        show: true,
      },
      {
        pagePath: `/pages/tabbar/contact?business_id=${shareData.value.business_id}&urltype=${shareData.value.urltype}`,
        text: "联系",
        iconPath: "/static/image/tabbar/7-1.png",
        selectedIconPath: "/static/image/tabbar/7-2.png",
        id: 4,
        show: true,
      },
    ];
    // 不是微信浏览环境不展示联系我们和提醒
    if (!isWeixin()) {
      list.value.splice(2, 1);
      list.value.splice(list.value.length - 1, 1);
    }
  }
};
watch(
  () => is_money_remind.value,
  (nVal, oVal) => {
    // 是否隐藏到价提醒
    nextTick(() => {
      list.value.forEach((item) => {
        if (item.text == "提醒") {
          item.show = nVal;
        }
      });
    });
  }
);
watch(
  () => is_gold_basis.value,
  (nVal, oVal) => {
    // 是否隐藏到价提醒
    nextTick(() => {
      list.value.forEach((item) => {
        if (item.text == "基差") {
          item.show = nVal;
        }
      });
    });
  }
);
function setRemindMenuHandler(show) {
  // 是否隐藏到价提醒
  nextTick(() => {
    list.value.forEach((item) => {
      if (item.text == "提醒") {
        item.show = show;
      }
    });
  });
}
function setBasisMenuHandler(show) {
  // 是否隐藏基差菜单
  nextTick(() => {
    list.value.forEach((item) => {
      if (item.text == "基差") {
        item.show = show;
      }
    });
  });
}
watchEffect(() => {
  showAll.value = props.isShowAllMenu;

  updateTabBarList(showAll.value);
});
onBeforeMount(() => {
  updateTabBarList(showAll.value);
});
onShow(() => {
  uni.hideTabBar();
});
const { colorStyle } = useTheme();
</script>

<style lang="scss" scoped>
// 定义底部高度变量
$footer-height: 120rpx;
.tab_bar {
  // max-width: 750rpx;
  margin: 0 auto;
  text-align: center;
  position: fixed;
  z-index: 999;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  justify-content: center;
  align-items: center;
  height: $footer-height;
  // height: calc(
  //   $footer-height + constant(safe-area-inset-bottom)
  // ); ///兼容 IOS<11.2/
  // height: calc($footer-height + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  // padding-bottom: calc(constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  // padding-bottom: calc(env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
  padding-bottom: 30rpx; ///兼容 IOS>11.2/
  padding-top: 20rpx;
  overflow: hidden;
  .tab-bar-item {
    position: relative;
    flex: 1;

    .middle {
      position: absolute;
      top: -70rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 137rpx !important;
      height: 137rpx !important;
    }

    .tab_img {
      width: 40rpx;
      height: 40rpx;
    }

    .tab_text {
      margin-top: 10rpx;
      font-size: 24rpx;
      color: #595959;
    }

    .active {
      font-weight: 700;
      color: rgba(117, 93, 29, 1);
    }
  }
}
</style>
